<template>
    <div class="template">
        <h3>示例</h3>
        <div class="elWrapper">
            <!-- 表单 -->
            <form-template :formData='formData' @formCommHandler='formCommHandler'></form-template>
        </div> 
        <div class="markdown-body">
            <FromTemplateMD></FromTemplateMD>
        </div>
    </div>  
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import FormTemplate from '@/components/Form'
import FromTemplateMD from "../md/FormTemplateMD.md"
export default {
    name: "Home",
    components: {
        FormTemplate,
        FromTemplateMD
    },
    data() {
      return {
            //表单数据
            formData: {
                // isformData:
                // 搜索元素渲染
                searchRender: [
                    { field: 'name', label: '姓名', type: '$input', placeholder: '请输入昵称', span:6},
                    { field: 'role', label: '角色', type: '$input', placeholder: '请输入角色', span:6},
                    { field: 'sex', label: '性别', type: '$select', placeholder: '请选择性别', span:6, options: [{ label: '男', value: '0' }, { label: '女', value: '1' }]},
                    { field: 'age', label: '年龄', type: '$input', validate: 'number', placeholder: '请输入年龄', span:6},
                    { field: 'flag1', label: '是否单身', type: '$radio', span:6, options: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }] },
                    { field: 'single', label: '是否出库', type: '$checkbox', span:6},
                    { field: 'num', label: '数字', type: '$input', validate: 'number', placeholder: '请输入数值', span:6 },
                    { field: 'date', label: '日期', format:'yyyy-MM-dd', valueformat:'yyyy-MM-dd', type: '$date', validate: 'date', placeholder: '请选择日期', span:6},
                    // { field: 'checkedList', label: '爱好', visibleMethod: this.visibleMethod, type: '$checkboxs', span:24, options: [{ label: '运动、跑步', value: '1' }, { label: '听音乐', value: '2' }, { label: '泡妞', value: '3' }, { label: '吃美食', value: '4' }] },
                    { field: 'editor', label: '富文本', type: '$editor', span: 24},
                    { 
                        align: 'center',
                        span: 24, 
                        type: '$buttons',
                        children: [
                            //type按相应类别传入如下值 按规定传 
                            {type: 'cancel', content: '取消', status: '', size:"mini"},
                            {type: 'reset', content: '重置', status: '', size:"mini"},
                            {type: 'submit', content: '提交', status: 'primary', handler: 'searchFn', size:"mini"}
                        ] 
                    }
                ],
                // 搜索数据绑定
                queryData: {
                    name: '张三',
                    role: '',
                    sex: '',
                    age: '',
                    flag1: '',
                    single: true,
                    checkedList: ["线下主题活动"],
                    num: '',
                    date: '2020-06-08',
                    center: '',
                    remark: '',
                    pageNum: 1,
                    pageSize: 10,
                    delFlag: 0,
                    editor:"232323"
                },
                rules: {
                    name: [
                        { required: true, message: '姓名必填', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '年龄必填', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '性别必填', trigger: 'change' }
                    ]
                }
            },
        }
    },
    methods: {
        //表单事件
        formCommHandler(data) {
            if(data.type == "submit") { //表单提交
                console.log('表单提交成功')
            }
            if(data.type == "reset") { //表单重置
                console.log('表单重置成功')
            }
            if(data.type == "cancel") { //表单取消
                console.log('取消成功')
            }
            if(data.type == "search") { //表格查询操作  在查询表格接口前操作
                console.log('查询前操作')
            }
            if(data.type == "save"){ //表格保存操作
                console.log('保存成功')
            }
        },
    },
    mounted(){
        // console.log(urlCommon.queryApi.url)
    }
}
</script>
<style scoped lang>
    .elWrapper{
        width:100%;
        padding:10px 20px;
        box-sizing:border-box;
        height:550px;
    }
</style>


